<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/";
%>
<html>
<head>
	<base href="<%=basePath%>">
	<meta charset="UTF-8">

	<link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
	<link href="jquery/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css" type="text/css" rel="stylesheet" />

	<script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
	<script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.js"></script>
	<script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/locale/bootstrap-datetimepicker.zh-CN.js"></script>

	<link rel="stylesheet" type="text/css" href="jquery/bs_pagination/jquery.bs_pagination.min.css">
	<script type="text/javascript" src="jquery/bs_pagination/jquery.bs_pagination.min.js"></script>
	<script type="text/javascript" src="jquery/bs_pagination/en.js"></script>
	<script type="text/javascript">

		$(function(){
			pageList(1,2);
			//单击创建按钮
			$("#addBtn").click(function(){
				$(".time").datetimepicker({
					minView: "month",
					language:  'zh-CN',
					format: 'yyyy-mm-dd',
					autoclose: true,
					todayBtn: true,
					pickerPosition: "bottom-left"
				});
				$.ajax({
					url:"workbenchCon/owner.do",
					//data:{},
					dataType:"json",
					type:"get",
					success:function(data){
						var html="<option></option>";
						$.each(data,function(i,j){
							html+="<option value='"+j.id+"'>"+j.name+"</option>";
						})
						$("#create-marketActivityOwner").html(html);
						$("#create-marketActivityOwner").val("${user.id}")
						$("#createActivityModal").modal("show");
					}

				})

			})

			//单击创建-保存按钮
			$("#saveBtn").click(function(){
				$.ajax({
					url:"workbenchCon/activityCreate.do",
					data:{
						"owner":$.trim($("#create-marketActivityOwner").val()),
						"name":$.trim($("#create-marketActivityName").val()),
						"startDate":$.trim($("#create-startTime").val()),
						"endDate":$.trim($("#create-endTime").val()),
						"cost":$.trim($("#create-cost").val()),
						"description":$.trim($("#create-describe").val())
					},
					dataType:"json",
					type:"post",
					success:function(data){
						//pageList(1,2);
						/*
							$("#activityPage").bs_pagination('getOption', 'currentPage')表示
							操作后停留在当前页面
							$("#activityPage").bs_pagination('getOption', 'rowsPerPage')操作后
							维持已经设置好的每页展现的记录数
							这两个参数不需要我们进行任何的修改直接使用即可
						 */
						//做完添加操作后，应该回到第一页，维持每页展现的记录数
						pageList(1
								,$("#activityPage").bs_pagination('getOption', 'rowsPerPage'));

						//后端打回来的信息，如果是yes就表示添加成功
						if(data.yesOrNo=="yes"){
							$("#activityAddForm")[0].reset()
							$("#createActivityModal").modal("hide");
						}
						else{
							//alert(data.msg);
							alert(data.msg);
						}
					}
				})
			})

			function pageList(pageNo,pageSize){
				//将全选的复选框的勾干掉
				$("#qx").prop("checked",false);
				$("#search-name").val($.trim($("#hidden-name").val()));
				$("#search-owner").val($.trim($("#hidden-owner").val()));
				$("#search-startDate").val($.trim($("#hidden-startDate").val()));
				$("#search-endDate").val($.trim($("#hidden-endDate").val()));
				$.ajax({
					url:"workbenchCon/activityShowList.do",
					data:{
						"pageNo":pageNo,
						"pageSize":pageSize,
						"searchName":$.trim($("#search-name").val()),
						"searchOwner":$.trim($("#search-owner").val()),
						"searchStartDate":$.trim($("#search-startDate").val()),
						"searchEndDate":$.trim($("#search-endDate").val())
					},
					dataType:"json",
					type:"get",
					success:function(data){
						var html="";
						$.each(data.dataList,function(i,n){
							html+='<tr class="active">';
							html+='<td><input type="checkbox" name="xz" value="'+n.id+'"/></td>';
							html+='<td><a style="text-decoration: none; cursor: pointer;" onclick="window.location.href=\'workbenchCon//detail.do?id='+n.id+'\';">'+n.name+'</a></td>';
							//html+='<td><a style="text-decoration: none; cursor: pointer;" onclick="window.location.href=\'workbench/activity/detail.jsp\;">哈哈</a></td>';
							html+='<td>'+n.owner+'</td>';
							html+='<td>'+n.startDate+'</td>';
							html+='<td>'+n.endDate+'</td>';
							html+='</tr>';
						})
						$("#activityBody").html(html);
						//数据处理完毕后，进行分页操作，通过插件
						var totalPages=data.total%pageSize==0?data.total/pageSize:parseInt(data.total/pageSize)+1;
						$("#activityPage").bs_pagination({
							currentPage: pageNo, // 页码
							rowsPerPage: pageSize, // 每页显示的记录条数
							maxRowsPerPage: 20, // 每页最多显示的记录条数
							totalPages: totalPages, // 总页数
							totalRows: data.total, // 总记录条数

							visiblePageLinks: 3, // 显示几个卡片

							showGoToPage: true,
							showRowsPerPage: true,
							showRowsInfo: true,
							showRowsDefaultInfo: true,
							//该回调函数时在，点击分页组件的时候触发的
							onChangePage : function(event, data){
								pageList(data.currentPage , data.rowsPerPage);
							}
						});

					}

				})
			}


			$("#searchBtn").click(function(){
				$("#hidden-name").val($.trim($("#search-name").val()));
				$("#hidden-owner").val($.trim($("#search-owner").val()));
				$("#hidden-startDate").val($.trim($("#search-startDate").val()));
				$("#hidden-endDate").val($.trim($("#search-endDate").val()));
				pageList(1,2);
			})
			//触发全选
			$("#qx").click(function(){
				$("input[name=xz]").prop("checked",this.checked);
				$("#activityBody").on("click",$("input[name=xz]"),function(){
					$("#qx").prop("checked",$("input[name=xz]").length==$("input[name=xz]:checked").length)
				})
			})
			//删除按钮
			$("#deleteBtn").click(function(){
				var $xz=$("input[name=xz]:checked");
				var id="";
				if($xz.length==0){
					alert("请选择删除的内容");
				}
				else{
					if(confirm("确定要删除所选中的吗")){
						for(var i=0;i<$xz.length;i++){
							id+="id="+$($xz[i]).val();
							if(i<$xz.length-1){
								id+="&";
							}
						}

						$.ajax({
							url:"workbenchCon/activityDelete.do",
							data:id,
							dataType:"json",
							type:"post",
							success:function(data){
								pageList(1,2);
							}
						})
					}

				}

			})

			//修改按钮
			$("#editBtn").click(function(){
				var $xz=$("input[name=xz]:checked");
				var id="";
				if($xz.length==0){
					alert("请选择要修改的内容");
				}
				else if($xz.length>1){
					alert("请选择一条记录");
				}
				else{
					var id=$xz.val();
					var html="<option></option>";
					$.ajax({
						url:"workbenchCon/activityUpdate.do",
						dataType:"json",
						data:{"id":id},
						type:"post",
						success:function(data){
							$.each(data.userList,function(i,j){
								html+="<option value='"+j.id+"'>"+j.name+"</option>";
							})
							$("#edit-owner").html(html);//将获取的值给列表
							//给名称等铺上值
							$("#edit-name").val(data.activity.name);
							$("#edit-owner").val(data.activity.owner);
							$("#edit-startDate").val(data.activity.startDate);
							$("#edit-endDate").val(data.activity.endDate);
							$("#edit-cost").val(data.activity.cost);
							$("#edit-description").val(data.activity.description);
							$("#edit-ida").val(data.activity.id);//id值给隐藏域
						}
					})
					$("#editActivityModal").modal("show");
				}
			})

			//修改按钮里的更新按钮
			$("#updateBtn").click(function(){

				$.ajax({
					url:"workbenchCon/activityUpdatePoint.do",
					data:{
						"owner":$.trim($("#edit-owner").val()),
						"name":$.trim($("#edit-name").val()),
						"startDate":$.trim($("#edit-startDate").val()),
						"endDate":$.trim($("#edit-endDate").val()),
						"cost":$.trim($("#edit-cost").val()),
						"description":$.trim($("#edit-description").val()),
						"id":$.trim($("#edit-ida").val())
					},
					dataType:"json",
					type:"post",
					success:function(data){
						//后端打回来的信息，如果是yes就表示添加成功
						if(data.yesOrNo=="yes"){
							$("#editActivityModal").modal("hide");
							//pageList(1,2);
							pageList($("#activityPage").bs_pagination('getOption', 'currentPage')
									,$("#activityPage").bs_pagination('getOption', 'rowsPerPage'));

						}
						else{
							//alert(data.msg);
							alert("更新失败");
						}
					}
				})
			})

		});

	</script>
</head>
<body>
<input type="hidden" id="hidden-name"/>
<input type="hidden" id="hidden-owner"/>
<input type="hidden" id="hidden-startDate"/>
<input type="hidden" id="hidden-endDate"/>
<input type="hidden" id="edit-ida"/>
<!-- 创建市场活动的模态窗口 -->
<div class="modal fade" id="createActivityModal" role="dialog">
	<div class="modal-dialog" role="document" style="width: 85%;">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal">
					<span aria-hidden="true">×</span>
				</button>
				<h4 class="modal-title" id="myModalLabel1">创建市场活动</h4>
			</div>
			<div class="modal-body">

				<form id="activityAddForm" class="form-horizontal" role="form">

					<div class="form-group">
						<label for="create-marketActivityOwner" class="col-sm-2 control-label">所有者<span style="font-size: 15px; color: red;">*</span></label>
						<div class="col-sm-10" style="width: 300px;">
							<select class="form-control" id="create-marketActivityOwner">
								<%--<option>zhangsan</option>
								<option>lisi</option>
								<option>wangwu</option>--%>
							</select>
						</div>
						<label for="create-marketActivityName" class="col-sm-2 control-label">名称<span style="font-size: 15px; color: red;">*</span></label>
						<div class="col-sm-10" style="width: 300px;">
							<input type="text" class="form-control" id="create-marketActivityName">
						</div>
					</div>

					<div class="form-group">
						<label for="create-startTime" class="col-sm-2 control-label">开始日期</label>
						<div class="col-sm-10" style="width: 300px;">
							<input type="text" class="form-control time" id="create-startTime" readonly>
						</div>
						<label for="create-endTime" class="col-sm-2 control-label">结束日期</label>
						<div class="col-sm-10" style="width: 300px;">
							<input type="text" class="form-control time" id="create-endTime" readonly>
						</div>
					</div>
					<div class="form-group">

						<label for="create-cost" class="col-sm-2 control-label">成本</label>
						<div class="col-sm-10" style="width: 300px;">
							<input type="text" class="form-control" id="create-cost">
						</div>
					</div>
					<div class="form-group">
						<label for="create-describe" class="col-sm-2 control-label">描述</label>
						<div class="col-sm-10" style="width: 81%;">
							<textarea class="form-control" rows="3" id="create-describe"></textarea>
						</div>
					</div>

				</form>

			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
				<button type="button" class="btn btn-primary" id="saveBtn">保存</button>
			</div>
		</div>
	</div>
</div>

<!-- 修改市场活动的模态窗口 -->
<div class="modal fade" id="editActivityModal" role="dialog">
	<div class="modal-dialog" role="document" style="width: 85%;">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal">
					<span aria-hidden="true">×</span>
				</button>
				<h4 class="modal-title" id="myModalLabel2">修改市场活动</h4>
			</div>
			<div class="modal-body">

				<form  class="form-horizontal" role="form">

					<div class="form-group">
						<label for="edit-marketActivityOwner" class="col-sm-2 control-label">所有者<span style="font-size: 15px; color: red;">*</span></label>
						<div class="col-sm-10" style="width: 300px;">
							<select class="form-control" id="edit-owner">
								<%--<option>zhangsan</option>
								<option>lisi</option>
								<option>wangwu</option>--%>
							</select>
						</div>
						<label for="edit-marketActivityName" class="col-sm-2 control-label">名称<span style="font-size: 15px; color: red;">*</span></label>
						<div class="col-sm-10" style="width: 300px;">
							<input type="text" class="form-control" id="edit-name" value="发传单">
						</div>
					</div>

					<div class="form-group">
						<label for="edit-startTime" class="col-sm-2 control-label">开始日期</label>
						<div class="col-sm-10" style="width: 300px;">
							<input type="text" class="form-control time" id="edit-startDate">
						</div>
						<label for="edit-endTime" class="col-sm-2 control-label">结束日期</label>
						<div class="col-sm-10" style="width: 300px;">
							<input type="text" class="form-control time" id="edit-endDate">
						</div>
					</div>

					<div class="form-group">
						<label for="edit-cost" class="col-sm-2 control-label">成本</label>
						<div class="col-sm-10" style="width: 300px;">
							<input type="text" class="form-control" id="edit-cost">
						</div>
					</div>

					<div class="form-group">
						<label for="edit-describe" class="col-sm-2 control-label">描述</label>
						<div class="col-sm-10" style="width: 81%;">
							<textarea class="form-control" rows="3" id="edit-description">123</textarea>
						</div>
					</div>

				</form>

			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
				<button type="button" class="btn btn-primary" id="updateBtn">更新</button>
			</div>
		</div>
	</div>
</div>




<div>
	<div style="position: relative; left: 10px; top: -10px;">
		<div class="page-header">
			<h3>市场活动列表</h3>
		</div>
	</div>
</div>
<div style="position: relative; top: -20px; left: 0px; width: 100%; height: 100%;">
	<div style="width: 100%; position: absolute;top: 5px; left: 10px;">

		<div class="btn-toolbar" role="toolbar" style="height: 80px;">
			<form class="form-inline" role="form" style="position: relative;top: 8%; left: 5px;">

				<div class="form-group">
					<div class="input-group">
						<div class="input-group-addon">名称</div>
						<input class="form-control" type="text" id="search-name">
					</div>
				</div>

				<div class="form-group">
					<div class="input-group">
						<div class="input-group-addon">所有者</div>
						<input class="form-control" type="text" id="search-owner">
					</div>
				</div>


				<div class="form-group">
					<div class="input-group">
						<div class="input-group-addon">开始日期</div>
						<input class="form-control" type="text" id="search-startDate" />
					</div>
				</div>
				<div class="form-group">
					<div class="input-group">
						<div class="input-group-addon">结束日期</div>
						<input class="form-control" type="text" id="search-endDate">
					</div>
				</div>

				<button type="button" id="searchBtn" class="btn btn-default">查询</button>

			</form>
		</div>
		<div class="btn-toolbar" role="toolbar" style="background-color: #F7F7F7; height: 50px; position: relative;top: 5px;">
			<div class="btn-group" style="position: relative; top: 18%;">
				<button type="button" class="btn btn-primary" id="addBtn"><span class="glyphicon glyphicon-plus"></span> 创建</button>
				<button type="button" class="btn btn-default" id="editBtn"><span class="glyphicon glyphicon-pencil"></span> 修改</button>
				<button type="button" class="btn btn-danger" id="deleteBtn"><span class="glyphicon glyphicon-minus"></span> 删除</button>
			</div>

		</div>
		<div style="position: relative;top: 10px;">
			<table class="table table-hover">
				<thead>
				<tr style="color: #B3B3B3;">
					<td><input type="checkbox" id="qx"/></td>
					<td>名称</td>
					<td>所有者</td>
					<td>开始日期</td>
					<td>结束日期</td>
				</tr>
				</thead>
				<tbody id="activityBody">
				<%--<tr class="active">
					<td><input type="checkbox" /></td>
					<td><a style="text-decoration: none; cursor: pointer;" onclick="window.location.href='detail.jsp';">发传单</a></td>
					<td>zhangsan</td>
					<td>2020-10-10</td>
					<td>2020-10-20</td>
				</tr>
				<tr class="active">
					<td><input type="checkbox" /></td>
					<td><a style="text-decoration: none; cursor: pointer;" onclick="window.location.href='detail.jsp';">发传单</a></td>
					<td>zhangsan</td>
					<td>2020-10-10</td>
					<td>2020-10-20</td>
				</tr>--%>
				</tbody>
			</table>
		</div>

		<div style="height: 50px; position: relative;top: 30px;">
			<div id="activityPage"></div>
		<%--	<div>
				<button type="button" class="btn btn-default" style="cursor: default;">共<b>50</b>条记录</button>
			</div>
			<div class="btn-group" style="position: relative;top: -34px; left: 110px;">
				<button type="button" class="btn btn-default" style="cursor: default;">显示</button>
				<div class="btn-group">
					<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
						10
						<span class="caret"></span>
					</button>
					<ul class="dropdown-menu" role="menu">
						<li><a href="#">20</a></li>
						<li><a href="#">30</a></li>
					</ul>
				</div>
				<button type="button" class="btn btn-default" style="cursor: default;">条/页</button>
			</div>
			<div style="position: relative;top: -88px; left: 285px;">
				<nav>
					<ul class="pagination">
						<li class="disabled"><a href="#">首页</a></li>
						<li class="disabled"><a href="#">上一页</a></li>
						<li class="active"><a href="#">1</a></li>
						<li><a href="#">2</a></li>
						<li><a href="#">3</a></li>
						<li><a href="#">4</a></li>
						<li><a href="#">5</a></li>
						<li><a href="#">下一页</a></li>
						<li class="disabled"><a href="#">末页</a></li>
					</ul>
				</nav>
			</div>--%>
		</div>

	</div>

</div>
</body>
</html>